<template>
  <div>
    <div class="example"></div>
    <svg width="200" height="200">
      <path d="M 20,100 L 70,150 L 150,20 " id="hook">
      </path>
      <rect x="0" y="0" width="200" height="200" fill="white" id="rect">
        <!-- <animateTransform attributeName="transform" type="translate"></animateTransform> -->
      </rect>
    </svg>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.example{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  
}
#hook{
  stroke: purple;
  stroke-width: 10px;
  stroke-linecap: round;
  fill: none;
}
#rect{
  animation: trans 4s infinite;
}
@keyframes trans{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(100%);
  }
}
</style>